<style>
    .jqplot-highlighter-tooltip {
        
    }
</style>
<?php
    echo $javascript->link(array('front/chart/jquery.jqplot', 'front/chart/jqplot.highlighter.min', 'front/chart/jqplot.cursor.min', 'front/chart/jqplot.dateAxisRenderer.min','front/chart/jqplot.pointLabels.min'));
    echo $this->Html->css(array('front/chart/jquery.jqplot.min'));
?>

<ul class=<?php if($access->isLoggedin()) echo "headsup_panel_user"; else echo "headsup_panel"; ?>>
        <div class="clear"></div>
        <div class="thanks" id="show_thanks" name="show_thanks" style="display:none">THANK YOU FOR RATING.</div>
	<li class=col1>
		<h1>search the universe</h1>
	</li>
	<li class='col2 right'>
		<form>
			<select name="search_type" class="search_type">
				<option value="0">Subjects</option>
				<option value="1">Tags</option>
			</select>
			<input type="search" name="subject" placeholder="Type Keyword">
			<button type="submit"> &nbsp; </button>
		</form>
	</li>
</ul>
<div class=subject_panel>
	
	<ul class=sp_subject_info>
		<li class='breadings col1'>
			<ul>
				<li>Subject</li>
				<li> &#9002; </li>
				<li><a href="#"><?php echo $subject['Subject']['subject']; ?></a></li>
			</ul>
		</li>
	</ul>
	
	<div id=subjectinfo>
		
		<table>
			<tr id=subject_info>
                <?php
                $thumbnail = $this->PhpThumb->generate(
                        array(
                            'save_path' => WWW_ROOT . 'img/uploads/Subjects/thumbs',
                            'display_path' => 'uploads/Subjects/thumbs',
                            'error_image_path' => 'noimage.png',
                            'src' => WWW_ROOT . "img/uploads/Subjects/" . $subject['Subject']['image'],
                            'w' => 310,
                            'h' => 321,
                            'q' => 100,
                            'zc' => 1
                        )
                );
                ?>
				<td class="subject_photo">
                                    <div class="subj_img">
                                        <?php echo $this->Html->image($thumbnail['src'], array('width' => $thumbnail['w'], 'height' => $thumbnail['h'], 'alt' => $subject['Subject']['subject'])); ?>
                                        <a class="r_img_subj" href="#report_wrapper" id="r_img_subj" onclick="change_rpt_field(4,<?php echo $subject['Subject']['id'];?>,0);">REPORT IMAGE</a>
                                    </div>
                                </td>
				<td class=subject_profile>
                    <?php
                        foreach ($tags as $taglist) {
                    ?> 
    					<ul class=breads>
                            <?php 
                                $taglist = array_reverse($taglist);
                                foreach ($taglist as $tag) {
                                    $titleDis = $tag['title'];
                                    if(strlen($titleDis) > 15)
                                    {
                                        $titleDis = substr($titleDis, 0, 14) . ' ...';
                                    }
                            ?>
                                    <li><?php echo $this->Html->link($tag['title'],array('controller'=>'Subjects','action'=>'tags',$tag['id']));  ?></li>
                            <?php 
                                } 
                            ?>
    					</ul>
                    <?php
                        }
                    ?>
					<hgroup>
						<h1><?php echo $subject['Subject']['subject']; ?> <small><?php if(isset($subject['Subject']['desc']))echo '(' . $subject['Subject']['desc'] . ')'; ?></small></h1>
						<h2>Current U-Rating: <span><?php if($subject['Subject']['if_rated']) echo number_format(round($subject['Subject']['avg_rating'], 1), 1); ?></span>
							<small>Total Votes: Must be a Universal Member to view this data</small>
						</h2>
                        <?php
                            if (isset($topadjectives)) {
                                $i = 1;
                                $num = 3;
                        ?>
						<h3>Top 3 Associated Adjectives:</h3>
						<ul>
                        <?php
                                foreach ($topadjectives as $adjective) {
                        ?>
                            <li><?php echo $adjective['title']; ?> (<?php echo number_format(round($adjective['percentage'], 1), 1); ?>%) <a class="r_adj" href="#report_wrapper" onclick="change_rpt_field(2,<?php echo $adjective['id'].",".$subject['Subject']['id'];?>);">report adjective</a> </li>
                        <?php
                                if ($i == $num)
                                    break;
                                $i++;
                            }
                        ?>
						</ul>
                        <?php } ?>
					</hgroup>
				</td>
				<td class=subject_creator>
					<hgroup>
                        <?php
                        $thumbnail = $this->PhpThumb->generate(
                                array(
                                    'save_path' => WWW_ROOT . 'img/uploads/Subjects/thumbs',
                                    'display_path' => 'uploads/Subjects/thumbs',
                                    'error_image_path' => 'noimage.png',
                                    'src' => WWW_ROOT . "img/uploads/Subjects/" . $creator['UserProfile']['image'],
                                    'w' => 40,
                                    'h' => 40,
                                    'q' => 100,
                                    'zc' => 1
                                )
                        );
                        ?>
						<h3>Subject Creator:</h3>
						<span>
                        <?php 
                            echo $this->Html->image($thumbnail['src'], 
                                                    array('width' => $thumbnail['w'], 'height' => $thumbnail['h'], 
                                                          'alt' => $subject['Subject']['subject'],
                                                          'url' => array('controller' => 'subjects', 'action' => 'subject_list', $subject['Subject']['user_id'])));
                            if (!empty($creator['UserProfile']['screenname'])) {
                                echo $creator['UserProfile']['screenname'];
                            } else {
                                echo $subject['User']['username'];
                            }
                        ?>
                        </span>
						
						<h3>Inception Date:</h3>
						<span class=medium><?php echo date('d-m-Y', strtotime($subject['User']['created'])) ?></span>
					</hgroup>
					<ul>
						<li class=fb><img src="<?php echo $this->webroot ?>assets/images/@facebook.png" alt="@facebook" width="115" height="25" /></li>
						<li class=tt><img src="<?php echo $this->webroot ?>assets/images/@twitter.png" alt="@twitter" width="115" height="26" /></li>
						<li class=gp><img src="<?php echo $this->webroot ?>assets/images/@google+.png" alt="@google+" width="115" height="26" /></li>
					</ul>
				</td>
			</tr>
			<?php if($subject['Subject']['can_rate']) { ?>
            <tr id=subject_rating>
				<td colspan="3">
					<form action="" method="get">
					<button rateit type="submit" class="rateit" value="<?php echo $subject['Subject']['id'] ?>" onclick="return false;">rate it</button>
				
					<div class="slider-range-min">
						<ul>
							<li class=col1>hate</li>
							<li class=col2>love</li>
						</ul>
					</div>
					<input type="text" class="rates" name="rates" readonly>
					</form>
				</td>
			</tr>
            <?php }?>
			
			<tr id=subject_graph>
				<td colspan="3">
					<div class=reportbug><a href="">report a bug</a></div>
                    <div>
                        <h2>&nbsp;</h2>
                        <div id="chartdiv" style="width:1020"></div>
                    </div>
				</td>
			</tr>
			
			<tr id=subject_demograph>
				<td colspan="3">
					<h2><img src="<?php echo $this->webroot ?>temp/quick_cuts/img_subject-icon.jpg" alt="img_subject-icon" width="30" height="30" /> View Demographic <a id="show-demo" class="show-hide-demo" style="font-size:13px;color:#64cdf3" href="javascript:void(0)">(click to expand)</a><a id="hide-demo" class="show-hide-demo" style="font-size:13px;color:#64cdf3;display:none;" href="javascript:void(0)">(click to hide)</a>
                    </h2>
				</td>
			</tr>
			
			<tr id=subject_demolist>
				<td colspan="3" id=demographic style="display: none;">
					
					<table>
                    <?php
                        foreach($demographics['stats'] as $profile_field) {
                            if(isset($profile_field['pv']['user_id']))
                            {
                    ?>
                        <tr>
							<td><?php echo $profile_field['pf']['title'] ?></td>
							<td>
								<?php 
                                    foreach($profile_field['statistic_data'] as $stats) {
                                        $percent = number_format(round($stats['value_percent'], 1), 1);
                                        $rating = number_format(round($stats['avg_rating'], 1), 1);
								        echo ucfirst($stats['profile_field_value']);
                                        echo "($percent%, UR: $rating)";
                                        echo "<br>";
				                ?>
                                <?php } ?>
							</td>
						</tr>
                    <?php
                            }
                            else
                            {
                                if ($profile_field['pf']['type'] == 'select') {
                                    $options = explode(',', $profile_field['pf']['value']);
                                    $is_yes_no_property = false;
                                    if(count($options) == 2)
                                    {
                                        if(($options[0] == 'Yes' && $options[1] = 'No') || ($options[0] == 'No' && $options[1] = 'Yes'))
                                            $is_yes_no_property = true;
                                    }
                    ?>
						<tr>
                            <td><?php echo $profile_field['pf']['title'] ?></td>
    						<td>
                                <div id="parent_div_<?php echo $profile_field['pf']['id']; ?>">
        							<form action="" method="post">
                                    <?php
                                        if($is_yes_no_property) {
                                    ?>
                                        <span>Please check if you are a <?php echo ucfirst($profile_field['pf']['title']); ?> to view this information</span>
                                    <?php
                                        } 
                                        else 
                                        {
                                    ?>
                                        <span>Please choose your <?php echo ucfirst($profile_field['pf']['title']); ?> to view this information</span>
                                    <?php        
                                        }
                                    ?>
        							<select name="" id="option_<?php echo $profile_field['pf']['id']; ?>">
        								<option value="">--Please select--</option>
                                        <?php
                                            foreach($options as $option)
                                            {
                                        ?>
                                                <option value="<?php echo $option; ?>"><?php echo $option; ?></option>
                                        <?php
                                            }
                                        ?>
        							</select>
        							<button type="submit" class="profile_field_saving" value="<?php echo $profile_field['pf']['id'] ?>" onclick="return false;">save</button>
        							</form>
                                </div>
    						</td>
                        </tr>
                    <?php
                                }
                            }
                        }
                    ?>
					</table>
					
				</td>
			</tr>
			
			<tr id=subject_form>
				<td colspan="3">
                    <?php
                        echo $this->Form->create('Subject', array('action' => 'comment'));
                    ?>
                    <label for="">Comment</label>
                    <?php
                        $user_id = $_SESSION['Auth']['User']['id'];
                        echo $this->Form->input('Comment.subject_id', array('label' => '', 'value' => $subject['Subject']['id'], 'type' => 'hidden'));
                        echo $this->Form->input('Comment.user_id', array('label' =>  '', 'value' => $user_id, 'type' => 'hidden'));
                        echo $this->Form->input('Comment.comment', array('label' => '', 'rows' => '5', 'cols' => '50', 'id' => 'commentBox'));
                        echo $this->Form->end(array('label' => 'Submit', 'div' => false));
                    ?>
				</td>			
			</tr>
			
			<tr id=subject_user_comments>
				<td colspan="3">
					<ul class=user_comments_list>
						<li class=col1>All Comments (<?php echo count($comments); ?>)</li>
                        <?php if(count($comments) > 3) { ?>
						<li class=col2><a href="javascript:void(0)" id="see-all-comments">see all</a><a href="javascript:void(0)" id="hide-comments" style="display: none;">hide comments</a></li>
                        <?php }?>
                        
					</ul>
					
					<table id=comments_framebox>
                    <?php
                        $max_display = 1;
                        foreach($comments as $comment) {
                    ?>
                        <tr <?php if($max_display > 3) { ?>class="can-hide-comment" style="display: none;" <?php } ?>>
							<td class='uc_profile'>
								<img src="<?php echo $this->webroot ?>temp/tmp_img/img_user_commnets-001.jpg" alt="<?php echo $comment['User']['username'] ?>" width="50" height="50" />
								<h3><?php echo $comment['User']['first_name'] . ' ' . $comment['User']['last_name']; ?></h3>
								<small><?php echo date('F d, Y', strtotime($comment['Comment']['created'])); ?> @ <?php echo date('g:i a', strtotime($comment['User']['created'])); ?></small>
							</td>
							<td class='uc_message'>
								<?php echo $comment['Comment']['comment']; ?> 
							</td>
							<td class='uc_rates'>
								<a agree href="javascript:void(0)" class="agree_comment" comment_id="<?php echo $comment['Comment']['id']; ?>"> &nbsp; 
                                <span id="agree_count_<?php echo $comment['Comment']['id']; ?>"><?php if($comment['agree'] > 0) {?>+<?php echo $comment['agree']; }?></span> 
                                </a>
								<a disagree href="javascript:void(0)" class="disagree_comment" comment_id="<?php echo $comment['Comment']['id']; ?>"> &nbsp; 
                                <span id="disagree_count_<?php echo $comment['Comment']['id']; ?>"><?php if($comment['disagree'] > 0) { ?>-<?php echo $comment['disagree']; }?></span> 
                                </a>
								<a report href="#report_wrapper" class="r_cmt" onclick="change_rpt_field(3,<?php echo $comment['Comment']['id']?>,0);"> &nbsp; </a>
							</td>
						</tr>
                    <?php
                            $max_display++;
                        }
                    ?>
					</table>
					
					
				</td>
			</tr>
		</table>	
	</div>
	
	<div class=clear></div>

	<div id=wrapthumbs_page>
	<a class="prevPage browse left"></a> 
	
		<!-- root element for scrollable --> 
		<div class="scrollable">     
		     
		    <ul class="items"> 
                <?php foreach($subjects as $subj){
                    $thumbnail = $this->PhpThumb->generate(
                                            array(
                                                'save_path' => WWW_ROOT . 'img/uploads/Subjects/thumbs',
                                                // Where to save the thumbnail. (Make sure it is writable by the web server)
            
                                                'display_path' => 'uploads/Subjects/thumbs',
                                                // The web accessible path to the directory that the thumbnail lives in after its created.
            
                                                'error_image_path' => 'img/error.jpg',
                                                // The default image to display if something goes wrong while generating a thumbnail. 
            
                                                'src' => WWW_ROOT . "img/uploads/Subjects/" . $subj['Subject']['image'],
                                                // The source image to be converted into a thumbnail.
                                                // From here on out, you can pass any standard phpThumb parameters
            
                                                'w' => 95,
                                                'h' => 125,
                                                'q' => 100,
                                                'zc' => 1
                                            )
                                    );
                    if($thumbnail['error'] == 1)
                    {
                        continue;
                    }
                    $strSubjDis = $subj['Subject']['subject'];
                    if(strlen($strSubjDis) > 10)
                    {
                        $strSubjDis = substr($strSubjDis, 0, 9) . '...';
                    }
                ?>
		    	<li>
                    <?php 
                        echo $this->Html->image($thumbnail['src'], array('width' => $thumbnail['w'], 'height' => $thumbnail['h'],
                                                                         'title'=>$subj['Subject']['subject'],
                                                                         'alt'=>$subj['Subject']['subject'],
                                                                         'url' => array('controller' => 'subjects', 'action' => 'subject', $subj['Subject']['id']))); 
                    ?>
                    
                    <h2><?php echo $strSubjDis; ?></h2>
                </li>
            <?php } ?>
		    </ul> 
		     
		</div> 
	 
	<a class="nextPage browse right"></a>
	</div>
	
</div>
<input type="hidden" id="h_show_thank" name="h_show_thank" value="<?php echo $show_thanks;?>"/>
<script language='javascript'>
$(document).ready(function(){
    var base_url=$('#base-url').text();
    $('.show-hide-demo').click(function(){
        var show_demo = document.getElementById("show-demo");
        var hide_demo = document.getElementById("hide-demo");
        if(show_demo.style.display == 'none')
        {
            show_demo.style.display = 'inline';
            hide_demo.style.display = 'none';
        }
        else
        {
            show_demo.style.display = 'none';
            hide_demo.style.display = 'inline';
        }
        $('#demographic').slideToggle(400);
    });
    $('#see-all-comments').click(function(){
        var see_all = document.getElementById("see-all-comments");
        var hide_almost = document.getElementById("hide-comments");
        see_all.style.display = 'none';
        hide_almost.style.display = 'inline';
        var list_can_hide_rows = document.getElementsByClassName("can-hide-comment");
        for(var i = 0; i < list_can_hide_rows.length; i++)
        {
            list_can_hide_rows[i].style.display = '';
        }
    });
    $('#hide-comments').click(function(){
        var see_all = document.getElementById("see-all-comments");
        var hide_almost = document.getElementById("hide-comments");
        see_all.style.display = 'inline';
        hide_almost.style.display = 'none';
        var list_can_hide_rows = document.getElementsByClassName("can-hide-comment");
        for(var i = 0; i < list_can_hide_rows.length; i++)
        {
            list_can_hide_rows[i].style.display = 'none';
        }
    });
    $('.profile_field_saving').on('click', function(){
       var profile_id = $(this).val();
       var select_box = document.getElementById("option_" + profile_id);
       if(select_box.options[select_box.selectedIndex].value == '')
       {
            alert("Please select a valid value");
       }
       else
       {
            var subjID = <?php echo $subject['Subject']['id']; ?>;

            $.ajax({
                url: base_url+"/subjects/ajax_profile_field_value",
                type: "POST",
                data: {
                    subject_id : subjID,
                    profile_id : profile_id,
                    value: select_box.options[select_box.selectedIndex].value
                    },
                dataType: "json",
                success: function(response){
                    if(!response.error){
                        var parent_div = document.getElementById("parent_div_" + profile_id);
                        parent_div.innerHTML = response.data;
                    }
                    else
                    {
                        alert("Error happen! Please try again.")
                    }
                }
            });     
       }  
       return false;
    });
    $('.agree_comment').on('click', function(){
        var comment_id = $(this).attr("comment_id");
        $.ajax({
            url: base_url+"/subjects/comment_vote",
            type: "POST",
            data: {
                id : comment_id,
                type : 'agree'
                },
            dataType: "json",
            success: function(response){
                if(!response.error){
                    var parent_span = document.getElementById("agree_count_" + comment_id);
                    parent_span.innerHTML = response.data;
                }
                else
                {
                    alert("Error happen! Please try again.")
                }
            }
        });
       return false;
    });
    $('.disagree_comment').on('click', function(){
       var comment_id = $(this).attr("comment_id");
        $.ajax({
            url: base_url+"/subjects/comment_vote",
            type: "POST",
            data: {
                id : comment_id,
                type : 'disagree'
                },
            dataType: "json",
            success: function(response){
                if(!response.error){
                    var parent_span = document.getElementById("disagree_count_" + comment_id);
                    parent_span.innerHTML = response.data;
                }
                else
                {
                    alert("Error happen! Please try again.")
                }
            }
        });
       return false;
    });
    var line1=<?php echo $history; ?>;
            var plot1 = $.jqplot('chartdiv', [line1], {
                title:'Voting History',
                axes:{
                    xaxis:{
                        pad:0.5,
                        renderer:$.jqplot.DateAxisRenderer,
           
                        tickOptions:{
                            show: true,
                            showMark: true,
                             showGridline: true,
                             
                            formatString:'%b&nbsp;%#d&nbsp;%Y',
                            mark: 'cross'
            
                        }
                    },
                    yaxis:{
                        min: 0,      // minimum numerical value of the axis.  Determined automatically.
                        max: 100,
                        padMax:1.3,
                        ticks:[0,10,20,30,40,50,60,70,80,90,100]   ,
                        tickOptions:{
                             showMark: true,
                             showGridline: true,
                            formatString:''
                        }
                    }
                },highlighter: {
    show: true,
    sizeAdjust: 7.5
  },
                seriesDefaults:{
                   
          show: true,         // show the trend line
        color: '#1A5588',
                    lineWidth:5,
                    shadow:true,
                    shadowAngle:45,
                    shadowOffset:1
                     
                },
                axesDefaults:{
                    base:10,pad: 12
                }
            });
            
            if(jQuery("#h_show_thank").val()=="1"){                        
                $("#show_thanks").css("display","block");                        
                $("#show_thanks").delay(5000).fadeOut(1500);
            }
});
</script>